# Color

## Default Color

Basiclly VechaiUI supports two `dynamic colors` that are neutral and primary color.

*<b>Dynamic colors</b>: They are used in css variable...meaning you can change their value by adding color scheme in theme.*

The default color of all components will be neutral. Add prop `color="colorName"` to change color.

```tsx
import * as React from "react";
import { VechaiProvider, Button } from "@vechaiui/react";

function App() {
  return (
    <VechaiProvider>
      <Button>Neutral</Button> // neutral color
      <Button color="primary">Primary</Button> // primary color
    </VechaiProvider>
  );
}
```

## Adding Color

To add other colors edit the `colors` option in the @vechaiui/core plugin of tailwindcss.

```js
// tailwind.config.js
import colors from "tailwindcss/colors";

module.exports = {
  theme: {
    extend: {
      colors: {
        pink: colors.pink,
        // name your color
        warning: colors.yellow,
      }
    }
  },
  // add VechaiUI plugin
  plugins: [
    require("@tailwindcss/forms"),
    require("@vechaiui/core")({
      colors: ["pink", "warning"]
    }),
    // ...
  ],
};
```

```tsx
import * as React from "react";
import { VechaiProvider, Button } from "@vechaiui/react";

function App() {
  return (
    <VechaiProvider>
      <Button color="warning">Primary</Button> // warning color
      <Button color="pink">Primary</Button> // pink color
    </VechaiProvider>
  );
}
```
